<template>
  <el-tabs v-model="activeName" class="demo-tabs"
           :lazy="true"
           @tab-click="handleClick">
    <el-tab-pane v-for="item in categories" :key="item.id" :label="item.name" :name="item.id">
      <el-row :gutter="10">
        <el-col v-for="item in list" :key="item.id"
                :xs="24" :sm="12" :md="12" :lg="8" :xl="6"
                :data-id="item.id"
                @click="toDetail"
        >
          <div class="grid-content ">
            <el-image
                style="flex:1;width: 100px; height: 100px"
                :lazy="true"
                :src="item.bookCover"
                fit="contain"
            ></el-image>
            <div class="b_title">
              <div style="font-size: 18px;font-weight: 500;padding-bottom: 4px">
                {{ item.bookName }}
              </div>
              <div class="b_desc" style=" ">
                {{ item.bookIntroduction }}
              </div>
              <div style="font-size: 16px;padding-top: 5px">
                {{ item.bookAuthor }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-tab-pane>
    <div v-show="list.length>0 && !last" style="padding:20px;text-align: center">
      <el-alert title="加载更多" type="success" center :closable="false" @click="loadMore"></el-alert>
    </div>
  </el-tabs>
</template>

<script>
import {get} from '../../request/request'
import {bookList, categories} from '../../request/api'

export default {
  name: "Categories",
  data() {
    return {
      cid: '',
      activeName: '',
      categories: [],
      list: [],
      pageNum: 1,
      pageSize: 30,
      first: true,
      last: false
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    handleClick(tab, event) {
      this.pageNum = 1
      this.first = true
      this.last = false
      this.list = []
      this.cid = this.categories[tab.index].id
      this.getBookInfo(this.categories[tab.index].id)
    },
    getCategories() {
      get(categories).then(res => {
        this.categories = res.data
        this.activeName = res.data[0].id
        this.getBookInfo(res.data[0].id)
      })
    },
    getBookInfo(cid) {
      const data = {
        categoryId: cid,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }
      get(bookList, data).then(res => {
        const list = this.list
        this.list = list.concat(res.data.content)
        this.first = res.data.first
        this.last = res.data.last
        this.pageNum = this.pageNum + 1
      })
    },
    toDetail(e) {
      const id = e.currentTarget.dataset.id
      this.$router.push("/detail/" + id)
    },
    loadMore() {
      this.getBookInfo(this.cid)
    }
  }
}
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  background-color: #f4f5f7;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-col {
  padding-top: 2px;
  padding-bottom: 10px;
}

.grid-content {
  padding: 5px 2px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  align-items: center;
  display: flex;
  min-height: 100px;
}

.b_title {
  display: flex;
  flex: 2;
  flex-direction: column;
  padding-left: 5px;
}

.b_desc {
  display: inline;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
}
</style>
